<template>
  <div class="center_bottomchart">
    <div class="header">
      <div class="title1">{{title}}</div>
      <Select :isTable="false" :dataSwitch="true" v-model="checkList">
        <template slot="left">
          <span class="datashow">数据显示:</span>
          <el-switch
            v-model="showLabel"
            active-color="#13ce66"
            >
          </el-switch>
        </template>
      </Select>
    </div>
    <div class="bot">
      <Echart
        :options="options"
        id="bottomLeftChart"
        class="echarts_bottom1"
        :isResize="true"
      ></Echart>
    </div>
  </div>
</template>

<script>
import { currentGET } from "api";
import { graphic } from "echarts";
import Select from "./Select.vue";

function toFixed(val, fix = 0) {
  return val ? Number(val).toFixed(fix) : val
}
const label = {
  show: true,
  position: 'top',
}
export default {
  props: {
    title: {
      type: String,
      default: '图表'
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    Select,
  },
  data() {
    return {
      options: {},
      checkList: [
        "中长期电量",
        "日前电量",
        "实时电量",
        "中长期电价",
        "日前电价",
        "实时电价",
      ],
       showLabel: true,
    };
  },
  created() {
    this.init(this.data);
  },
  watch: {
    data: {
      handler(val) {
        this.init(val);
      },
      deep: true,
    },
    checkList(val) {
      this.init(this.data);
      console.log(val, "checkList------");
    },
    showLabel: {
      handler() {
        this.init(this.data);
      },
      deep: true,
    },
  },
  methods: {
    // getData() {
    //   this.pageflag = true;
    //   currentGET("big6", { companyName: this.companyName }).then((res) => {
    //     // console.log("安装计划", res);
    //     if (res.success) {
    //       const obj = {};
    //       Object.keys(res.data).forEach((kk) => {
    //         obj[kk] = res.data[kk].slice(0, 5);
    //       });
    //       this.dataSource = obj;
    //       this.init(obj);
    //     } else {
    //       this.pageflag = false;
    //       this.$Message({
    //         text: res.msg,
    //         type: "warning",
    //       });
    //     }
    //   });
    // },
    init(newData) {
      const category = [],
         midLongTermPower = [], // 中长期电量
         dayAheadClearedPower = [], // 日前电量
         realTimeClearedPower = [], // 实时电量
         midLongTermPrice = [], // 中长期电价
         dayAheadClearedPrice = [], // 日前电价
         realTimeClearedPrice = []; // 实时电价

      newData.forEach(item =>{
        category.push(item.summaryDate || ((item.hour || item.hour === 0) && (item.hour.toString() + ':00')))
        midLongTermPower.push(toFixed(item.dayAheadClearedPower, 0))
        dayAheadClearedPower.push(toFixed(item.dayAheadClearedPower, 0))
        realTimeClearedPower.push(toFixed(item.realTimeClearedPower, 0))
        midLongTermPrice.push(toFixed(item.midLongTermPrice, 0))
        dayAheadClearedPrice.push(toFixed(item.dayAheadClearedPrice, 0))
        realTimeClearedPrice.push(toFixed(item.realTimeClearedPrice, 0))
      })
      this.options = {
        // toolbox:{
        //   bottom: 15,
        //   feature:{
        //     saveAsImage:{
        //       name: this.title,
        //       show: true
        //     }
        //   },
        // },
        tooltip: {
          trigger: "axis",
        //   backgroundColor: "#ffffff",
        //   borderColor: "rgba(147, 235, 248, .6)",
        //   textStyle: {
        //     color: "red",
        //   },
          // formatter: function (params) {
          //   // 添加单位
          //   // var result = params[0].name + "<br>";
          //   var result = "";
          //   params.forEach(function (item) {
          //       // console.log(item,'item---');
                
          //   //   if (item.value) {
          //   //     if (item.seriesName == "安装率") {
          //   //       result +=
          //   //         item.marker +
          //   //         " " +
          //   //         item.seriesName +
          //   //         " : " +
          //   //         item.value +
          //   //         "%</br>";
          //   //     } else {
          //   //       result +=
          //   //         item.marker +
          //   //         " " +
          //   //         item.seriesName +
          //   //         " : " +
          //   //         item.value +
          //   //         "个</br>";
          //   //     }
          //   //   } else {
          //   //     result += item.marker + " " + item.seriesName + " :  - </br>";
          //   //   }
          //     result += item.marker + " " + item.seriesName + " :  "+ item.value + "</br>";
          //   });
          //   // console.log(result,'result----');
            
          //   return result;
          // },
        },
        legend: {
          data: this.checkList,
          //   data: ["已安装", "计划安装", "安装率"],
          //   top: "24",
          //   icon: "circle",
          bottom: category.length > 10 ? 24 : 8,
          itemWidth: 15,
          textStyle: {
            color: "#607FB5",
            fontSize: 16,
          },
        },
        grid: {
          left: "12",
          right: "12",
          bottom: "48",
          top: "18",
          containLabel: true,
        },
        xAxis: {
          data: category,
          axisLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#e2e9f5",
            },
          },
          axisLabel: {
            fontSize: "16",
            //   fontWeight: 400,
            color: "#909090",
          },
          axisTick: {
            show: false,
          },
        },
        dataZoom: [
          {
            show: category.length > 10,
            type: "slider",
            xAxisIndex: [0, 5],
            // zoomLock: true,
            // width: 7,
            height: 16,
            bottom: 8,
            // right: 12,
            // borderWidth: 0,
            // borderColor: "transparent",
            // backgroundColor: "rgba(4,42,102,0.7)",
            // fillerColor: "#043D92",
            // borderRadius: 10,
            // handleSize: 0,
            // showDetail: false,
            start: 0,
            end: category.length > 10 ? 60 : 100,
            // brushSelect: false,
            filterMode: "filter",
            showDataShadow: false,
            // realtime: true,
            // textStyle: {
            //   color: "transparent",
            // },
          },
        ],
        yAxis: [
          {
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                // dashOffset: 5,
                // color: "#153877",
              },
            },
            // axisLabel: {
            //   fontSize: '10',
            //   fontWeight: 800,
            //   formatter: "{value}",
            // },
          },
          {
            show: true,
            splitLine: { show: false },
            // axisLine: {
            //   lineStyle: {
            //     type: 'dashed',
            //     // color: "#607FB5",
            //   },
            // },
            // axisLine: {
            //   lineStyle: {
            //     color: "#B4B4B4",
            //   },
            // },
            // axisLabel: {
            //   formatter: "{value}% ",
            // },
          },
        ],
        series: [
          {
            name: "中长期电量",
            type: "bar",
            barWidth: 16,
            itemStyle: {
              borderRadius: [5, 5, 0, 0],
              color: "#017efa",
            },
            data: midLongTermPower,
            label: { ...label, show: this.showLabel },
          },
          {
            name: "日前电量",
            type: "bar",
            barWidth: 16,
            itemStyle: {
              borderRadius: [5, 5, 0, 0],
              color: "#51cbff",
            },
            data: dayAheadClearedPower,
            label: { ...label, show: this.showLabel },
          },
          {
            name: "实时电量",
            type: "bar",
            barWidth: 16,
            itemStyle: {
              borderRadius: [5, 5, 0, 0],
              color: "#30d887",
            },
            data: realTimeClearedPower,
            label: { ...label, show: this.showLabel },
          },
          {
            name: "中长期电价",
            type: "line",
            smooth: false,
            showAllSymbol: false,
            symbol: "circle",
            symbolSize: 6,
            showSymbol: true,
            yAxisIndex: 1,
            boundaryGap: false,
            connectNulls: true,
            clip: false,
            itemStyle: {
              color: "#017efa",
            },
            lineStyle: {
              width: 2, // 设置线宽
            },
            data: midLongTermPrice,
            label: { ...label, show: this.showLabel },
          },
          {
            name: "日前电价",
            type: "line",
            smooth: false,
            showAllSymbol: false,
            symbol: "circle",
            symbolSize: 6,
            showSymbol: true,
            yAxisIndex: 1,
            boundaryGap: false,
            connectNulls: true,
            clip: false,
            itemStyle: {
              color: "#51cbff",
            },
            lineStyle: {
              width: 2, // 设置线宽
            },
            data: dayAheadClearedPrice,
            label: { ...label, show: this.showLabel },
          },
          {
            name: "实时电价",
            type: "line",
            smooth: false,
            showAllSymbol: false,
            symbol: "circle",
            symbolSize: 6,
            showSymbol: true,
            yAxisIndex: 1,
            boundaryGap: false,
            connectNulls: true,
            clip: false,
            itemStyle: {
              color: "#30d887",
            },
            lineStyle: {
              width: 2, // 设置线宽
            },
            data: realTimeClearedPrice,
            label: { ...label, show: this.showLabel },
          },
        ].filter((item) => this.checkList.includes(item.name)),
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottomchart {
  width: 100%;
  height: 100%;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    .title1{
      font-size: 24px;
      font-weight: 600;
      min-width: 100px;
    }
  }
  .bot {
    width: 100%;
    // height: 100%;
    height: calc(100% - 65px);
    .echarts_bottom1 {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
